<template>
	<view class="perfectInfo">
		<view class="tips">
			为了您的账号安全，请填写真实的个人资料
		</view>
		<view class="perfectInfo-box">
			<view class="box">
				<text>姓名</text>
				<input class="ipt" placeholder="请输入真实姓名" @input="input" v-model="userName"/>
			</view>
			<view class="box">
				<text>证件号码</text>
				<input class="ipt" placeholder="请输入证件号码" @input="input" v-model="number" type="number" clearable="true"/>
			</view>
		</view>
		<view class="address">
			<text>去填写收货地址</text>
			<image src="../../../../static/mine/rightjiantou.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//验证的规则
				rules: {
					number: {
						rule:/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
						msg: "请输入正确的证件号码"
					}
				}
			}
		},
		methods: {
			input(e) {
				if (!this.validate('number')) {
					return;
				} 
			},
			//判断验证是否符合要求
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					//提示信息
					uni.showToast({
						title: this.rules[key].msg,
						icon: 'error'
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},
		}
	}
</script>

<style scoped lang="less">
	.address{
		width: 100%;
		height: 86rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		margin-top: 60rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		text{
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}
		image{
			width: 12rpx;
			height: 24rpx;
		}
	}
.perfectInfo{
	padding: 40rpx;
	.tips{
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-bottom: 20rpx;
	}
	.perfectInfo-box{
		width: 100%;
		height: 186rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		padding: 0 20rpx;
		.box{
			display: flex;
			align-items: center;
			padding: 20rpx 10rpx;
			border-bottom: 1px solid #F2F2F2;
			text{
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				width: 150rpx;
			}
			.ipt{
				margin-left: 36rpx;
			}
		}
	}
}
</style>
